<template>
	<view class="container">
		<!-- F1广告 开始 -->
		<view class="banner">
			<image src="@/static/image/partService/partService-banner.png" mode="widthFix"></image>
		</view>
		<!-- F1广告 结束 -->

		<!-- F2组织简介 开始 -->
		<view class="description">
			<text>{{desc}}</text>
		</view>
		<!-- F2组织简介 结束 -->
		<view class="model-box">
			<view class="boxStyle1" @click="goPage('/pages/party/partyNews')">
				<view class="item-image">
					<image src="@/static/image/dangjianyaowen.png" mode="aspectFit"></image>
				</view>
				<view class="item-text">党建要闻</view>
				<view class="item-desc">最新资讯，尽汇于此。</view>
			</view>
			<view style="width: 63%;">
				<view class="boxStyle3" @click="goPage('/pages/party/party')" style="background-color: #FD5572;">
					<view class="item-image">
						<image src="@/static/image/dangzuzhi.png" mode="aspectFit"></image>
					</view>
					<view class="item-text">党组织
						<view class="item-desc" style="color:rgba(254,155,183,1)">怀忧党心，尽兴党责。</view>
					</view>
				</view>
				<view class="boxStyle3" style="margin-top: 20upx;background-color: #2ECF8C;" @click="goPage('/pages/pay/paymentAlgorithm')">
					<view class="item-image">
						<image src="@/static/image/dangyuanjiaofei.png" mode="aspectFit"></image>
					</view>
					<view class="item-text">
						缴费规则
						<view class="item-desc" style="color:rgba(138,229,191,1)">履职尽责创先进！</view>
					</view>
				</view>
			</view>
		</view>
		<!-- F3党员横向滚动图 开始 -->
		<view class="view-box">
			<view class="title">优秀党员</view>
			<scroll-view scroll-x="true">
				<view class="box">
					<view class="image-Container" v-for="item in members">
						<image :src="item.ownerEntity.profile" mode="widthFix"></image>
						<view class="person-name">{{item.ownerEntity.name}}</view>
					</view>
				</view>
			</scroll-view>
		</view>
		<!-- F3党员横向滚动图 结束 -->

		<!-- F4 党建咨询 开始 -->
		<view class="news-box">
			<view class="title">党建资讯</view>
			<newsCard v-for="(item,i) in newsList" :key='i' :url="item.coverImageUrl" :content="item.content" :subHead="item.publishTime"
			 @click='goDetail(i)' />

		</view>
		<!-- F4 党建咨询 结束 -->
	</view>
</template>

<script>
	import newsCard from '@/components/newsCard.vue'
	export default {
		components: {
			newsCard
		},
		data() {
			return {
				areaCode: this.$api.util.getAreaCode(),
				desc: '由xxxx批准，成立于2008年7月，现有支部3个，共有正式党员134人，预备党员5人，入党积极分子6人。',
				members: [],
				newsList: [],
			};
		},
		onLoad() {
			this.getArticalList()
			this.queryPartyMember()
		},
		methods: {
			goDetail(i) {
				let decodeItem = encodeURIComponent(JSON.stringify(this.newsList[i]));
				uni.navigateTo({
					url: '/pages/content/richText?item=' + decodeItem
				})
			},
			goPage(url) {
				uni.navigateTo({
					url: url
				})
			},
			getArticalList() {
				let params = {
					"areaCode": this.areaCode,
					"articleType": "BUILD",
					"startIndex": 1,
					"pageSize": 3,
					"published": true
				}
				this.$api.request.inquiryArticlePagination(params, (res) => {
					if (res.body.status.statusCode == "0") {
						this.newsList = res.body.data.articles
					}
				})
			},
			queryPartyMember() {
				let params = {
					areaCode: this.areaCode,
					type: 1,
					typeParty: 0,
					page: 1,
					pageSize: 4
				}
				this.$api.request.queryartyMemberList(params, (res) => {
					if (res.body.status.statusCode == "0") {
						this.members = res.body.data.vos
					}
				})
			}
		}
	}
</script>

<style lang="scss">
	page {
		background: $page-color-base;
	}

	.container {
		padding: 32rpx;

		.banner {
			image {
				display: block;
				border-radius: 8rpx;
				width: 686rpx;
				height: 320rpx;
			}
		}

		.description {
			min-height: 128rpx;
			margin-top: 24rpx;
			border-left: 4rpx solid #3E9CF9;
			padding: 10rpx 20rpx;
			background-image: url(@/static/image/partService/badge.png);
			background-repeat: no-repeat;
			background-size: 16%;
			background-position: right;
		}

		.title {
			padding: 32rpx 0rpx;
			font-weight: bold;
		}

		.view-box {
			.box {
				display: inline-flex;
			}

			.image-Container {
				display: flex;
				flex-direction: column;
				align-items: center;
				margin-right: 38rpx;

				image {
					border-radius: 8rpx;
					width: 138rpx;
					height: 184rpx;
					display: inline-block;
				}
			}
		}

	}

	.model-box {
		margin-top: 30upx;
		width: 100%;
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		flex-wrap: wrap;
	}

	.boxStyle1 {
		width: 35%;
		height: 260upx;
		background: #489CEF;
		border-radius: 8upx;
		padding: 0 20upx;

		.item-image {
			width: 100%;
			height: 70upx;
			margin-top: 30upx;


			image {
				width: 70upx;
				height: 70upx;
			}
		}

		.item-text {
			margin-top: 30upx;
			line-height: 50upx;
			font-size: 30upx;
			font-weight: bold;
			letter-spacing: 2px;
			color: white
		}

		.item-desc {
			font-size: 22upx;
			color: rgba(167, 207, 246, 1)
		}
	}

	.boxStyle3 {
		width: 100%;
		height: 120upx;
		background: #F5CF94;
		border-radius: 8upx;
		display: flex;

		.item-image {
			width: 70upx;
			height: 70upx;
			margin-top: 20upx;
			margin-left: 50upx;

			image {
				width: 70upx;
				height: 70upx;
			}
		}

		.item-text {
			line-height: 40upx;
			margin-top: 20upx;
			margin-left: 20upx;
			font-size: 30upx;
			font-weight: bold;
			letter-spacing: 2px;
			margin-left: 10upx;
			color: white
		}

		.item-desc {
			font-size: 22upx;
			font-weight: normal;
		}
	}
</style>
